<template>
    <div class="app">
        <div class="video-container">
            <video muted="muted" src="http://chst.vip:8081/crm/media/bg-video.d2d602a9.mp4" loop="loop" autoplay="autoplay" class="video"></video>
            
        </div>

    </div>
    <div class="loginOline">
        <h1>{{pageInfo.title}}</h1>
        <!-- 短信登录页面 -->
        <!-- <messageLogin ></messageLogin> -->
        <!-- <commonLogin ></commonLogin> -->

        <!-- 动态组件 -->
        <component :is="pageInfo.component"></component>

        

                
        <div class="toggle">
            <svg class="icon" aria-hidden="true">
                <use :xlink:href="icon"></use>
            </svg>
            <span @click="handleClick">{{pageInfo.toggleDes}}</span>
        </div>


    </div>
    
  </template>
  
  <script setup>
  import commonLogin from "../../components/login/commonLogin.vue"
  import messageLogin from "../../components/login/messageLogin.vue"
  import {ref,watchEffect,markRaw,computed} from "vue"

  // markRow可以将响应式的ref变成常规对象

//   声明一个页面数据 
  let pageInfo=ref({
    title:'千峰管理系统',//标题
    loginType:'common' ,//登入类型
    toggleDes:'点击切换手机登入',//切换的描述信息
    component:markRaw(commonLogin)  //要切换的组件
  })
 

  let isCommonLogin=ref(true)

//   点击切换登入方式
  let handleClick=()=>{
    isCommonLogin.value=!isCommonLogin.value
  }

//   通过结合高级侦听器和vue3的动态组件 

watchEffect(()=>{
    // 常规登入
    if(isCommonLogin.value){
        pageInfo.value={
            title:'千锋管理系统',//标题
            loginType:'common' ,//登入类型
            toggleDes:'点击切换手机登入',//切换的描述信息
            component:markRaw(commonLogin)   //要切换的组件

        }
    }else{
        // 手机短信登入
        pageInfo.value={
            title:'短信登入',//标题
            loginType:'message' ,//登入类型
            toggleDes:'使用用户密码登录',//切换的描述信息
            component:markRaw(messageLogin)  //要切换的组件

        }
        
    }
})

// 声明一个动态图标
let icon =computed(()=>{
    return isCommonLogin.value ? "#icon-iphone":"#icon-icon-test"
})

  </script>


<style lang="less" scoped>
        

    .loginOline{
        width: 400px;
        height: 550px;
        background-color: rgba(0,0,0, .3);
        position: fixed;
        right: 10%;
        top: 25%;

        .toggle{
            text-align: center;
            .icon{
                width: 20px;
                height: 20px;
                vertical-align: middle;
            }
            span{
                cursor: pointer;
                color: white;
            }
        }
        
       
        h1{
            padding: 90px 0  20px 0;
            text-align: center;
            color: white ;
        }
  
    
       
    }
    
    .app{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
    }
    








</style>
  